<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            /* 
                通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果
                    渐变是图片需要通过background-image来设置

                线性渐变，颜色沿着一条直线发生变化
                    linear-gradient()

                    linear-gradient(red, yellow) 红色在开头，黄色在结尾，中间是过渡区
                    - 线性渐变的开头，可以指定一个渐变的方向
                        to left
                        to right
                        to top
                        to bottom
                        xxxdeg  deg表示度数

                    - 渐变可以同时指定多个颜色，多个颜色默认情况下平均分布
                        也可以手动指定渐变的分布情况
            */

            background-image: linear-gradient(45deg , red, yellow);
            /* background-image: repeating-linear-gradient(red, yellow 50px) */
        }

        .box2{
            width: 200px;
            height: 200px;
            /* 
                radial-gradient() 径向渐变（放射性的效果）
                    默认情况下径向渐变的形状根据元素的形状来计算的
                    正方形->圆形
                    长方形->椭圆形
                    - 也可以手动指定径向渐变的大小
                    circle
                    ellipse
                    closest-side
                    closest-corner
                    
            */
            background-image: radial-gradient(yellow, red);
            /* background-image: radial-gradient(100px 100px at top center, yellow, red); */
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>